<template>
  <div class="task-wrap">
    <el-card class="box-card">
      <el-page-header class="custom-page-header" @back="goBack">
        <template #content>
          <span class="text-large font-600 mr-3"
            >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            反馈任务列表&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          </span>
        </template>
      </el-page-header>
      <div class="task-list">
        <el-card
          v-for="(task, index) in datalist"
          :key="index"
          class="task-card"
          body-style="padding: 4px"
        >
          <div class="task-content" style="height: 50px;">

              <div
                :class="['icon', getAqiClass(task.feedback_aqi)]"
                style="font-weight: bold ; border-radius: 8px; text-align: center "
              >
                {{ task.aqiExplain }}
              </div>

              <div class="task-text" style="width: 210px;">
                <span class="location"
                  >{{ task.province }} {{ task.city }} {{ task.date }}</span
                >
                <hr style="width: 90%; margin: 3px 0 5px 0; border: 0; border-top: 1px solid #ccc;">
                <div class="task-address">{{ task.address }}</div>
              </div>


            <el-button type="primary" size="mini" @click="checkTask(task)"
              >去检测</el-button
            >
          </div>
        </el-card>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.task-wrap {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("@/assets/02.png") no-repeat center center/cover;
}

.box-card {
  position: relative; /* 设置相对定位 */
  width: 400px; /* 固定宽度 */
  height: 650px; /* 固定高度 */
  border-radius: 10px;
  padding-top: 50px; /* 调整顶部内边距，确保内容不覆盖custom-page-header */
  background: url("@/assets/111.png") no-repeat center center/cover;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.custom-page-header {
  position: absolute; /* 设置绝对定位 */
  top: 0;
  left: 0;
  color: white;
  width: 100%; /* 设置与卡片等宽 */
  background-color: #087241; /* 设置背景颜色 */
  border-radius: 10px 10px 0 0; /* 顶部圆角 */
  padding: 15px;
  box-sizing: border-box; /* 确保padding不会影响宽度 */
  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

.custom-page-header .text-large {
  font-size: 20px !important; /* 调整字体大小 */
  font-weight: bold !important; /* 设置字体加粗 */
  color: white;
}

.task-list {
  padding: 2px;
  flex: 1; /* 占据剩余空间 */
  overflow-y: auto; /* 如果内容溢出，则滚动 */
  padding: 0; /* 去除卡片内边距 */
}

.header-image {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}

.task-card {
  margin-bottom: 10px;
  padding: 0; /* 去除卡片内边距 */
}

.task-content {

  display: flex;
  align-items: center;
  margin: 0;
  text-align: left;
  padding: 5px; /* 去除内边距 */
  width: 100%; /* 占满卡片宽度 */

}

.icon {
  width: 40px;
  height: 20px;
  margin-right: 10px;
  background-color: red;
  padding: 4px; 
  border-radius:5%;
}

.green {
  background-color: #02e300;
}

.yellow {
  background-color: #ffff00;
}

.orange {
  background-color: #ff7e00;
}

.red {
  background-color: #fe0000;
}

.purple {
  background-color: #98004b;
}

.maroon {
  background-color: #7e0123;
}

.location {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 10px; /* 添加下边距 */
}

.task-address {
  flex: 1;
  font-size: 14px;
}

@media (max-width: 600px) {
  .box-card {
    padding: 10px;
  }
  .form-container {
    flex-direction: column;
    align-items: flex-start;
  }
}
</style>

<script setup>
import { onMounted, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
// import axios from "axios";
import axios from "../../axios";

// 获取路由参数
const route = useRoute();
const router = useRouter();
const tokenValue = route.query.token;

const datalist = ref(null);

// 返回值对象
const loading = ref(true);
const error = ref(null);

// 定义请求数据的参数
const fetchData = async () => {
  try {
    const res = await axios.get("http://10.25.43.221:7000/service-admin/verification/getAllVerificationById", {
      headers: {
        Authorization: `Bearer ${tokenValue}`, // 在请求头中添加 Bearer Token
      },
    });
    datalist.value = res.data.sendResult;
    console.log("这是res.data");
    console.log(res.data);
  } catch (err) {
    error.value = "Error fetching data:" + err.message;
  } finally {
    loading.value = false;
  }
};

// 在组件挂载时调用fetchData函数
onMounted(() => {
  fetchData();
  console.log(datalist.value);
});

const checkTask = (task) => {
  router.push({
    path: "/Grider/Check",

    query: {
      token: tokenValue, // 使用已定义的 tokenValue
      task: JSON.stringify(task),
    },
  });
};

const getAqiClass = (aqiLevel) => {
  if (aqiLevel == 1) {
    return "green";
  } else if (aqiLevel == 2) {
    return "yellow";
  } else if (aqiLevel == 3) {
    return "orange";
  } else if (aqiLevel == 4) {
    return "red";
  } else if (aqiLevel == 5) {
    return "purple";
  } else if (aqiLevel == 6) {
    return "maroon";
  }
};

const goBack = () => {
  router.push({
    path: "/Grider/login",
    query: {
      token: tokenValue, // 使用已定义的 tokenValue
    },
  });
};
</script>
